<template>
	<base-page>
		<view class="common-wrap common-form body-overhide">
			<view class="common-title">电子秤设置</view>
			<view class="common-form-item">
				<label class="form-label">
					<text class="required">*</text>
					电子秤名称
				</label>
				<view class="form-input-inline"><input type="text" v-model="formData.name" class="form-input" /></view>
				<text class="form-word-aux"></text>
			</view>
			<view class="common-form-item">
				<label class="form-label">
					<text class="required">*</text>
					秤类型
				</label>
				<view class="form-input-inline border-none">
					<view class="scale-type">
						<view :class="{ active: formData.type == 'barcode' }" @click="formData.type = 'barcode'">条码秤
						</view>
						<view :class="{ active: formData.type == 'cashier' }" @click="formData.type = 'cashier'">收银秤
						</view>
					</view>
				</view>
			</view>
			<view class="common-form-item">
				<label class="form-label">
					<text class="required">*</text>
					电子秤品牌
				</label>
				<view class="form-input-inline border-none">
					<uni-data-select v-model="formData.brand" :localdata="brandList" label=""></uni-data-select>
				</view>
			</view>
			<view class="common-form-item">
				<label class="form-label">
					<text class="required">*</text>
					电子秤型号
				</label>
				<view class="form-input-inline border-none">
					<uni-data-select v-model="formData.model" :localdata="modelList"></uni-data-select>
				</view>
			</view>
			<view class="common-form-item">
				<label class="form-label">通讯方式</label>
				<view class="form-inline">
					<radio-group @change="networkTypeChange" class="form-radio-group">
						<label class="radio form-radio-item">
							<radio value="tcp" :checked="formData.network_type == 'tcp'" />
							TCP
						</label>
						<label class="radio form-radio-item">
							<radio value="serialport" :checked="formData.network_type == 'serialport'" />
							串口
						</label>
					</radio-group>
				</view>
			</view>

			<view class="scale-tips" v-if="formData.brand == 'dahua' && formData.model == 'TM'">
				<view class="">
					使用大华电子秤前需先配置一下电子秤“条码格式”，配置方式为：
				</view>
				<view>
					使用大华电子秤厂官方提供的大华电子秤上位机软件TMA4.0，连接到设备后，打开基础设置 -> 系统参数，设置条码格式为 “FFWWWWWNNNNNC” 或 “FFWWWWWNNNNNEEEEEC”，设置好之后点击下载，下载成功之后即配置完成
				</view>
			</view>

			<view class="scale-tips" v-if="formData.brand == 'aclas' && formData.model == 'LS'">
				<view class="">
					使用顶尖电子秤需将电子秤默认条码类型配置为“7” 或者 “87”
				</view>
			</view>

			<view v-show="formData.network_type == 'tcp'">
				<view class="common-form-item">
					<label class="form-label">
						<text class="required">*</text>
						设备ip地址
					</label>
					<view class="form-input-inline"><input type="text" v-model="formData.config.ip"
							class="form-input" /></view>
					<text class="form-word-aux"></text>
				</view>
				<view class="common-form-item">
					<label class="form-label">
						<text class="required">*</text>
						设备端口号
					</label>
					<view class="form-input-inline"><input type="text" v-model="formData.config.port"
							class="form-input" /></view>
					<text class="form-word-aux"></text>
				</view>
			</view>

			<view v-show="formData.network_type == 'serialport'">
				<view class="common-form-item">
					<label class="form-label">
						<text class="required">*</text>
						串口名称
					</label>
					<view class="form-input-inline"><input type="text" v-model="formData.config.serialport"
							class="form-input" /></view>
					<text class="form-word-aux"></text>
				</view>
				<view class="common-form-item">
					<label class="form-label">
						<text class="required">*</text>
						串口波特率
					</label>
					<view class="form-input-inline"><input type="text" v-model="formData.config.baudrate"
							class="form-input" /></view>
					<text class="form-word-aux"></text>
				</view>
			</view>

			<view class="common-btn-wrap">
				<button type="default" class="screen-btn" @click="saveFn">保存</button>
				<button type="primary" class="screen-btn" @click="back">返回</button>
			</view>
		</view>
	</base-page>
</template>

<script>
	import uniDataSelect from '@/components/uni-data-select/uni-data-select.vue';
	export default {
		components: {
			uniDataSelect
		},
		data() {
			return {
				brandList: [],
				modelList: [],
				formData: {
					type: 'barcode',
					name: "",
					brand: "",
					model: "",
					config: {
						ip: '',
						port: '',
						serialport: '',
						baudrate: ''
					},
					network_type: 'tcp'
				},
				flag: false,
				scaleId: 0,
				scaleBrand: {}
			};
		},
		async onLoad(option) {
			await this.getScaleBrand();
			if (option.scale_id) {
				this.scaleId = option.scale_id;
				this.getScaleDetail();
			}
		},
		onShow() {},
		watch: {
			'formData.brand': {
				handler: function(nval) {
					if (nval) {
						let modelList = this.scaleBrand[nval].model_list
						this.modelList = Object.keys(modelList).map(key => {
							return {
								value: key,
								text: modelList[key].model_name
							}
						})
						if (this.formData.model && !Object.keys(modelList).includes(this.formData.model)) this.formData
							.model = '';
					} else {
						this.formData.model = '';
						this.modelList = []
					}
				},
				immediate: true
			}
		},
		methods: {
			async getScaleBrand() {
				if (!this.addon.includes('scale')) {
					this.$util.showToast({
						title: '未安装电子秤插件'
					});
					return;
				}
				let res = await this.$api.sendRequest({
					url: '/scale/storeapi/scale/scaleBrand',
					async: false
				});
				if (res.code == 0) {
					this.scaleBrand = res.data
					let brandList = [];
					Object.keys(this.scaleBrand).forEach(key => {
						brandList.push({
							text: this.scaleBrand[key].brand_name,
							value: key
						})
					})
					this.brandList = brandList
				}
			},
			bradnChange(e) {
				this.formData.model = e.detail.value;
			},
			selectBrand(e) {
				this.formData.brand = e;
			},
			saveFn() {
				if (!this.addon.includes('scale')) {
					this.$util.showToast({
						title: '未安装电子秤插件'
					});
					return;
				}
				if (this.check()) {
					if (this.flag) return false;
					this.flag = true;

					let data = this.$util.deepClone(this.formData)
					data.config = JSON.stringify(this.formData.config)
					data.scale_id = this.scaleId

					this.$api.sendRequest({
						url: `/scale/storeapi/scale/${this.scaleId ? 'edit' : 'add'}`,
						data,
						success: res => {
							this.flag = false;
							this.$util.showToast({
								title: res.message
							});
							if (res.code >= 0) {
								setTimeout(() => {
									this.$util.redirectTo('/pages/scale/list');
								}, 1500);
							}
						}
					});
				}
			},
			back() {
				this.$util.redirectTo('/pages/scale/list');
			},
			check() {
				if (!this.formData.name) {
					this.$util.showToast({
						title: '请输入电子秤名称'
					});
					return false;
				}
				if (!this.formData.model) {
					this.$util.showToast({
						title: '请选择电子秤型号'
					});
					return false;
				}
				if (this.formData.network_type == 'tcp') {
					if (!this.formData.config.ip) {
						this.$util.showToast({
							title: '请输入设备IP地址'
						});
						return false;
					}
					if (!this.formData.config.port) {
						this.$util.showToast({
							title: '请输入设备端口号'
						});
						return false;
					}
				}
				if (this.formData.network_type == 'serialport') {
					if (!this.formData.config.serialport) {
						this.$util.showToast({
							title: '请输入串口名称'
						});
						return false;
					}
					if (!this.formData.config.baudrate) {
						this.$util.showToast({
							title: '请输入串口波特率'
						});
						return false;
					}
				}
				return true;
			},
			getScaleDetail() {
				if (!this.addon.includes('scale')) {
					this.$util.showToast({
						title: '未安装电子秤插件'
					});
					return;
				}
				this.$api.sendRequest({
					url: '/scale/storeapi/scale/detail',
					data: {
						"scale_id": this.scaleId
					},
					success: res => {
						if (res.code >= 0) {
							if (res.data) {
								this.formData = res.data
							}
						}
					}
				});
			},
			networkTypeChange(e) {
				this.formData.network_type = e.detail.value
			}
		}
	};
</script>

<style lang="scss">
	.common-wrap {
		padding: 30rpx;
		background-color: #fff;
		@extend %body-overhide;
	}

	.common-title {
		font-size: 0.18rem;
		margin-bottom: 0.2rem;
	}

	.scale-brand {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 0.15rem;
		align-items: flex-start;

		.form-label {
			padding: 0.09rem 0.15rem;
			text-align: right;
			width: 1.1rem;
			box-sizing: border-box;
		}

		.required {
			color: red;
			margin-right: 0.03rem;
		}
	}

	.brand-item {
		display: block !important;

		.brand-title {
			display: block !important;
			margin-top: 0.09rem;
			margin-bottom: 0.2rem;
		}

		.scale-model {
			display: flex;
			margin-bottom: 0.3rem;

			.model-item {
				margin-right: 0.5rem;
			}
		}
	}

	.scale-type {
		display: flex;
		align-items: center;

		view {
			width: 1rem;
			height: 0.35rem;
			line-height: 0.35rem;
			text-align: center;
			font-size: 0.14rem;
			border: 0.01rem solid #e6e6e6;
			border-left-width: 0;
			transition: all 0.3s;
			cursor: pointer;

			&:hover,
			&.active {
				border-color: $primary-color;
				color: $primary-color;
				background-color: rgba($color: $primary-color, $alpha: 0.1);
				box-shadow: -0.01rem 0 0 0 $primary-color;
			}

			&:first-child {
				border-left-width: 0.01rem;
				box-shadow: none;
			}
		}
	}

	.border-none {
		border: none !important;
	}

	/deep/ .uni-select {
		border-radius: 0;
	}

	.scale-tips {
		display: inline-block;
		padding: .1rem;
		border-radius: .05rem;
		color: $primary-color !important;
		border: .01rem solid $primary-color !important;
		background-color: rgba($color: $primary-color, $alpha: 0.1) !important;
		margin-left: 1.1rem;
		margin-bottom: 0.1rem;
	}
</style>